<template>
	<div class="yellow">
		<div class="header flex a-center jlr">
			<div class="back" @click="back"><i class="iconfont icon-arrow-left-copy"></i></div>
			<h2>订单详情</h2>
			<div class="back">&nbsp;</div>
		</div>

		<div class="abox">
			<div class="order">
				<div class="orderTitle flex a-center"><!--@click="selectdata(order.orderStatus)"-->
					<div style="flex: 1;">
						<h2> {{order.receiveName}} <span>{{order.receiveTel}}</span> </h2>
						<div class="address"><span v-if="order.isDefault">默认</span>{{order.dtlAddr}}</div>
					</div>
					<!-- <i class="iconfont icon-arrow-right"  v-if="order.orderStatus==-1"></i> -->
				</div>
				<div class="orderpro flex" v-for="item in order.productList" :key="item.productId" ><!--@click="enter('/goodsdetail?id='+item.productId)"-->
					<div class="img"><img :src="item.frontPicUrl"></div>
					<div class="info flex col jlr" v-if="order.orderStatus==0||order.orderStatus==1||order.orderStatus==2">
						<div>
							<h2 class="text-cell">{{item.productName}}</h2>
							<div class="params">{{item.colorName}}  <span>{{item.specsName}}</span> </div>
						</div>

						<div class="flex jlr">
							<div class="price">￥{{item.price}}</div>
							<div class="buy_nums">X{{item.buyNums}}</div>
						</div>
					</div>
					<div class="info flex col jlr" v-else>
						<div>
							<h2 class="text-cell">{{item.productName}}</h2>
							<div class="params flex">
								<div style="flex: 1; padding-right: 0.2rem;">颜色：{{item.colorName}}  <span>{{item.specsName}}</span></div>
								<div class="buy_nums" style="color: #fe7537;">X{{item.buyNums}}</div>
							</div>
							<div class="flex jlr a-center" v-if="item.returnOrderStatus == 9">
								<div class="price">￥{{item.price}}</div>
								<div class="orderAfter" @click="reqAfterSale(item)">申请售后</div>
							</div>
							<div class="flex jlr a-center" v-else>
								<div class="price">￥{{item.price}}</div>
								<div class="flex a-center">
									<div class="orderAfter" @click="repeal(item.orderItemId)">取消申请</div>
									<div class="orderAfter" @click="enter('/ferundInfo?id='+$route.query.id+'&productId='+$route.query.productId)" style="background: #fb4c53; border: 1px solid #fb4c53; color: #fff; margin-left: 0.2rem;">查看详情</div>
								</div>
							</div>
						</div>
					</div>

				</div>

				<div class="ordergroup">
					<div class="item flex jlr a-center">
						<h4>付款方式</h4>
						<div class="rightgroup flex a-center">
							<span>{{order.payType | paytype}}</span>
							<i>&nbsp;</i>
						</div>
					</div>
					<!--<div class="item flex jlr a-center">-->
						<!--<h4>售后服务</h4>-->
						<!--<div class="rightgroup flex a-center">-->
							<!--<span>七天退款</span>-->
							<!--<i>&nbsp;</i>-->
						<!--</div>-->
					<!--</div>-->
					<div class="item flex jlr a-center">
						<h4>运&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;费</h4>
						<div class="rightgroup flex a-center">
							<span class="ce">+￥{{order.shipFee||0}}</span>
							<i>&nbsp;</i>
						</div>
					</div>
					<div class="item flex jlr a-center">
						<h4>备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</h4>
						<div class="rightgroup flex a-center">
							<span>{{order.remark}}</span>
							<i>&nbsp;</i>
						</div>
					</div>
					<div class="item flex jlr a-center">
						<h4>下单时间</h4>
						<div class="rightgroup flex a-center">
							<span>{{order.createTime | formatDate}}  </span>
							<i>&nbsp;</i>
						</div>
					</div>
					<div class="item flex jlr a-center">
						<h4>订单编号</h4>
						<div class="rightgroup flex a-center">
							<span>{{order.orderId}}</span>
							<i>&nbsp;</i>
						</div>
					</div>
					<div class="item flex jlr a-center">
						<h4>订单金额</h4>
						<div class="rightgroup flex a-center">
							<span class="ce">￥{{order.totalAmt||0}}</span>
							<i>&nbsp;</i>
						</div>
					</div>
				</div>
			</div>


			<div class="orderFixed flex" v-if="order.orderStatus==0">
				<div class="btnfx1" @click="cancelOrder">取消订单</div>
				<div class="btnfx2" @click="openpay">去支付</div>
			</div>

			<div class="orderFixed flex" v-else-if="order.orderStatus==2">
				<div class="btnfx1" @click="enter('/physical?id='+$route.query.id)">查看物流</div>
				<div class="btnfx2" @click="upDateFinishTime">确认收货</div>
			</div>

			<div class="orderFixed flex" v-else>
				<div class="btnfx1" v-if="order.comment==0 && order.orderStatus==3" @click="enter('/ordermsg?id='+$route.query.id+'&productId='+$route.query.productId)">去评价</div>
				<div class="btnfx1" v-if="order.comment==1" @click="enter('/ordershowmsg?id='+$route.query.id+'&productId='+$route.query.productId)">查看评价</div>
			</div>

<!-- 			<div class="orderFixed flex" v-if="order.orderStatus==4">
				<div class="btnfx1" v-if="order.comment==1" @click="enter('/ordershowmsg?id='+$route.query.id+'&productId='+$route.query.productId)">查看评价</div>
			</div> -->

			<!-- <div class="orderFixed flex" v-if="order.orderStatus==5">
				<div class="btnfx1" @click="repeal">取消申请</div>
				<div class="btnfx2" @click="enter('/ferundInfo?id='+$route.query.id)">查看详情</div>
			</div> -->
		</div>
		<selectaddress :shows.sync="selectaddressState" v-if="selectaddressState" @cb="cb"></selectaddress>
		<payment :show.sync="paymentshow" :id="$route.query.id" v-if="paymentshow" @zf="zfsuccess"></payment>
	</div>
</template>
<script>
import selectaddress from '../address/main.vue'
import { formatDate } from '@/util/filters.js';
export default {
	components:{
		selectaddress
	},
  filters: {
    formatDate: function (time) {
      if(time != null){
        var date = new Date(time);
        return formatDate(date, "yyyy-MM-dd hh:mm:ss");
      }else{
        return '';
      }
    },
    paytype(v){
      if(v==1){
        return '在线支付'
      }else{
        return '货到付款'
      }
    }
  },
	data(){
		return {
			paymentshow:false,
			selectaddressState:false,
			order:{}
		}
	},

	activated() {
		this.init()
	},
	methods:{
		zfsuccess(){
			this.obj = {}
			this.init()
		},
		openpay(){
			this.paymentshow = true
		},
		init(){
			var that = this
			that.$ajax.getOrderProductsByOrderId({orderId:that.$route.query.id,memberId:localStorage.getItem('memberId')}).then(res=>{
				if(res.code==0){
					that.order = res.data.order
					console.log('ordershow',that.order)
				}
			})
		},
		cancelOrder(){
			var that = this
			that.$dialog.confirm({
			  title: '提示',
			  message: '是否确认取消订单？'
			}).then(() => {
			  that.$ajax.cancelOrder({orderId:that.$route.query.id}).then(res=>{
			  	if(res.code==0){
					that.$toast.success('取消订单成功')
					that.init()
				}
			  })
			}).catch(() => {
			  // on cancel
			});

		},
		repeal(itemid){
			var that = this
			that.$dialog.confirm({
			  title: '提示',
			  message: '是否确认取消退款申请？'
			}).then(() => {
			  that.$ajax.cancelRefund({orderId:that.$route.query.id,orderItemId:itemid}).then(res=>{
			  	if(res.code==0){
					that.$toast.success('取消申请成功')
					that.init()
				}
			  })
			}).catch(() => {
			  // on cancel
			});

		},
		selectdata(id){
			if(id==0){
				this.selectaddressState = true
			}
		},
		cb(v){
			var that = this
			that.order.dtlAddr = v.dtlAddr
			that.order.receiveName = v.contactsName
			that.order.receiveTel = v.phone
			that.order.isDefault = v.isDefault
			that.order.area = v.area
			that.$ajax.getShipFeeTotalAmt({
				area:v.area,
				payType:that.order.payType,
				products:(function(arr){
					return arr.map(el=>{
						return {
							productId:el.productId,
							colorId:el.colorId,
							specsId:el.specsId,
							buyNums:el.buyNums
						}
					})
				})(that.order.productList)
			}).then(res=>{
				if(res.code==0){
					that.order.shipFee = res.data.shipFee
				}
			})
		},
		upDateFinishTime(){//确认收货
			this.$dialog.confirm({ title: '提示',message: '是否确认收货？'}).then(() => {
				this.$ajax.upDateFinishTime({orderId:this.$route.query.id}).then(res=>{
					if(res.code==0){
						this.$toast.success('确认收货成功')
						this.init()
					}
				})
			}).catch(() => {
				  // on cancel
			});
		},
		enter(v){
			this.$router.push(v)
		},
		back(){
			this.$router.go(-1)
		},
    reqAfterSale(orderItem){
      this.$router.push(
        {
          path:'/ferund',
          query: {
            orderItemId: orderItem.orderItemId,
            orderId: this.order.orderId
          }
        }
      );
    }
	}
}
</script>
